import Add from '../componets/films/add.js';
import Delete from '../componets/films/delete.js';
import Edit from '../componets/films/edit.js';
import Search from '../componets/films/search.js';



let { $, table, layer, form } = layui;
export default class Films {
    constructor() {
        this.render();//render自定义取名
        this.handle();
    }
    render() {
        let template = `
                <!DOCTYPE html>
        <html lang="en">
        <head>
            <style>
                .type {
                    width: 100px;
                }

                .value {
                    width: 300px;
                }

                .addForm {
                    padding: 20px;
                }
              
            </style>
        </head>
        <body>
            <table id="filmsTable" lay-filter="filmsTable"></table>
            <script type="text/html" id="tools">
                        <form class="layui-form" lay-filter="searchForm">
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
                            <i class="layui-icon">&#xe654;</i>
                        </button>
                    </div>
                        <div class="layui-input-inline type">
                        <select name="type" >
                        <option value="name">电影名</option>
                        <option value="ename">电影英文名</option>
                       
                            </select>
                        </div>
                        <div class="layui-input-inline value">
                            <input type="text" name="value" placeholder="请输入搜索条件" class="layui-input">
                        </div>
                        <div class="layui-input-inline">
                            <button type="button" lay-event="search" class="layui-btn layui-btn-primary layui-btn-sm">
                                <i class="layui-icon">&#xe615;</i>
                                </button>
                        </div>
                    </div>
                </form>
                </script>
            
                    
                </div> 
                <script type="text/html" id="action">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>

                
                <script type="text/html" id="addfilmsTemplate"></script>
                <script type="text/html" id="editfilmsTemplate"></script>
        </body>
        </html>
        `;
        //改为替换掉主体内容content
        $("#content").html(template);
    }
    handle() {

        // 渲染表格数据

        table.render({
            elem: "#filmsTable",
            //
            url: "/films", //数据接口
            method: "get",
            // contentType: "application/json",
            toolbar: "#tools",

            page: true,
            limit: 10,
            limits: [5, 10, 15, 20, 25],
            request: {
                pageName: 'current',
                limitName: 'pageSize'
            },
            parseData: function (res) {
                return {
                    code: 0,
                    count: res.data.total,
                    data: res.data.rows
                }
            },
            cols: [
                [
                    //表头
                    {
                        field: "name",
                        title: "电影名",
                    },
                    { field: "ename", title: "电影英文名" },
                    {
                        field: "type",
                        title: "电影的类型",
                    },
                    {
                        field: "area",
                        title: "电影上映地区",
                    },
                    {
                        field: "time",
                        title: "电影时长",
                    },
                    {
                        field: "upDate",
                        title: "电影上映时间",
                    },
                    {
                        field: "year",
                        title: "年代",
                    },
                    {
                        field: "score",
                        title: "电影评分",
                    },
                    {
                        field: "count",
                        title: "电影票房",
                    },
                    {
                        field: "want",
                        title: "想看人数",
                    },
                    {
                        field: "intro",
                        title: "剧情简介",
                    },
                    {
                        field: "director",
                        title: "导演",
                        templet(d) {
                            let str = '';
                            for (let i = 0; i < d.director.length; i++) {
                                str += d.director[i].name + '/'
                            }
                            return d.director ? str : "";
                        }
                    },
                    {
                        field: "actor",
                        title: "演员",
                        templet(d) {
                            let str = '';
                            for (let i = 0; i < d.actor.length; i++) {
                                str += d.actor[i].name + '/'
                            }
                            return d.actor ? str : "";
                        }
                    },
                    // {
                    //     title: "图片",
                    //     field: "images",
                    // },
                    // //在学生的表格里增加一个所属班级
                    // {//学生所属班级显示的内容，但是cls是一个对象，可以通过一个函数，然后return出来想要的数据
                    //     field: "cls",
                    //     title: "所属班级",
                    //     // 使得所属班级里的数据为具体班级，而不是一个id
                    //     templet: function (d) {
                    //         //如果有些学生的所属班级没有数据则会报错，所以加一个判断，没有数据时为空
                    //         return d.cls ? d.cls.name : "";//d.cls.name为班级

                    //     }
                    // },
                    {
                        title: "操作",
                        toolbar: "#action",
                        width: 130,
                        align: 'center'
                    },
                ],
            ],

        });
        // 增加
        table.on('toolbar(filmsTable)', function (obj) {
            if (obj.event == "add") {
                //    调用增加学生的函数
                new Add();


            } else if (obj.event == "search") {
                // 搜索
                // console.log(form.val("searchForm"));
                // table.reload("filmsTable", {
                //     //直接将表单的type和value传到服务器端
                //     where: form.val("searchForm")
                // });
                new Search();
            }
        })
        // 删除
        table.on('tool(filmsTable)', function (obj) {
            if (obj.event == "del") {
                new Delete(obj);
                // 编辑
            } else if (obj.event == "edit") {
                // console.log(obj);
                new Edit(obj);
            }
        })


    }

}